import {View,Text,TouchableOpacity,StyleSheet,Modal,Image,FlatList,Button} from 'react-native';
import { useState,useEffect} from 'react';
import '../../global';
import { useDispatch,useSelector } from 'react-redux';


// 时间戳进行转换
function timestampToTime(timestamp) {
    var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = date.getDate();
    return Y + M + D;
}


const RenderItem = ({ item,navigation}) => {
    const list=useSelector(state=>state.list)
    return (
        <TouchableOpacity onPress={()=>{navigation.navigate('Detail',{listcon:item})
        fetch('https://wx.qasdwer.top:8080/user/studyhistory',{
                method:'put',
                headers:{
                  'content-type':'application/json;charset=utf-8'
                },
                body:JSON.stringify({title:item.title,excerpt:item.excerpt,userimg:item.userimg,username:item.username,time:item.time,historyimg:item.img,account:list.account,content:item.content})
              })
              .catch((error)=>{
                  console.log("Error");
                  throw error;
                });   
          
        }}>
        <View style={styles.listview}>
            <Text numberOfLines={1} style={styles.listtitle}>{item.title}</Text>
            <View style={styles.usermes}>
                <Image source={{uri:item.userimg}} style={styles.userimg} />
                <Text numberOfLines={1} style={styles.namet}>{item.username}       {item.time}</Text>
            </View>
            <Text numberOfLines={4} style={styles.listcontent}>{item.excerpt}</Text>
            <Image source={{uri:item.img}} style={styles.listimg}/>
        </View>
    </TouchableOpacity>
    )
}

     
     






const Study = ({navigation}) => {
    const [list,setList]=useState([])
    const [load,setLoad] = useState(true);
    useEffect(()=>{
        fetch('https://zhuanlan.zhihu.com/api/columns/ikaoyaner/articles')
        .then(res=>res.json())
        .then(res=>{
            let newList = [];
            for(let i=0;i<res.data.length;i++){
                let before = res.data[i];
                let obj = {
                    title : before.title,
                    userimg : before.author.avatar_url,
                    username : before.author.name,
                    time : timestampToTime(before.created),
                    content:before.content,
                    excerpt : before.excerpt,
                    img : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F1750448%2Ff%2F399641040.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653036007&t=c045ff70ea49250b9dc5876dea55c107',
                }
                 
                newList.push(obj);
        }
        setList(newList);
        setLoad(false);
        })
        
   },[])

    return (
        <View style={{width:"100%",height:0.83*h}}>
            {
                load ? 
                <Modal
                    transparent={true}
                    visible={load}
                >
                    <View>
                    <View style={{backgroundColor:'rgba(0,0,0,0.5)',borderRadius:20,
                    display:'flex',justifyContent:'center',alignItems:'center',flexDirection:'row',
                    width:'70%',height:changeH(330),top:0.3*h,left:0.15*w}}>
                        <Image source={require('../../assets/image/run.png')}style={{width:changeW(70),height:changeW(70)}}/>
                        <Text style={{color:'#F5F5F5',fontSize:changeW(35),fontWeight:'bold',marginLeft:changeW(25)}}>马上就来…</Text>
                    </View>
                    </View>
                </Modal> 
                :
                    <FlatList
                        data={list}
                        keyExtractor={(item)=>{return item.title}}
                        renderItem={({item}) => {return <RenderItem item={item} navigation={navigation}/>}}
                        />
            }
        </View>
    )
}

const styles=StyleSheet.create({
    listview:{
        width:'95%',
        height:changeH(400),
        backgroundColor:'white',
        position:'relative',
        marginLeft:changeW(20),
        marginRight:changeW(20),
        marginTop:changeH(30),
        borderRadius:changeW(30)
    },
    listtitle:{
        fontSize:changeW(35),
        fontWeight:'bold',
        position:'absolute',
        left:changeW(15),
        top:changeH(20),
        width:'95%',
    },
    listcontent:{
        color:'rgba(0,0,0,0.7)',
        position:'absolute',
        fontSize:changeW(23),
        top:changeH(200),
        left:changeW(30),
        width:changeW(450),
    },
    listimg:{
        width:changeW(190),
        height:changeH(170),
        position:'absolute',
        marginTop:changeH(100),
        right:changeW(20),
        borderRadius:changeW(10)
    },
    userimg:{
        width:changeW(70),
        height:changeW(70),
        borderRadius:changeW(35),
        marginTop:changeH(10)
    },
    usermes:{
        width:changeW(350),
        height:changeH(90),
        marginTop:changeH(100),
        marginLeft:changeW(30),
        flexDirection:'row',
        justifyContent:'space-between'
    },
    namet:{
        // lineHeight:changeH(75),
        fontSize:changeW(28),
        marginLeft:changeW(15),
        marginTop:changeH(35)
    },
    com:{
        width:changeW(200),
        marginLeft:changeW(480),
        marginTop:changeH(150),
        flexDirection:'row',
        justifyContent:'space-between'
    }
})

export default Study
